<style>
.qzcscl-box {
    width: 100%;
    overflow: hidden;
    padding: 50px 50px;
}
.qzcscl-title {
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
    align-items: center;
}
a.qzcscl-title-view {
    display: flex;
    align-items: center;
}
span.qzcscl-title-view-text {
    padding-right: 10px;
    font-weight: 600;
}
svg.qzcscl-title-view-icon {
    width: 20px;
    height: 20px;
    background: #eee;
    padding: 4px;
    border-radius: 50%;
}
span.qzcscl-title-text {
    font-size: 32px;
    font-weight: 600;
    color: #000;
}
.qzcscl-item {
    display: flex;
    flex-flow: wrap;
}
.qzcscl-list {
    width: calc(20% - 20px);
    margin-right: 20px;
    margin-bottom: 20px;
}
@media(max-width:768px){
.qzcscl-box {
    padding: 30px 10px;
}
.qzcscl-title {
    padding: 20px 0;
}
span.qzcscl-title-text {
    font-size: 20px;
}
.qzcscl-list {
    width: calc(50% - 10px);
    margin-right: 10px;
    margin-bottom: 10px;
}
}  
</style>
<div class="qzcscl-box">
    <div class="qzcscl-title">
        <span class="qzcscl-title-text">{{section.settings.title}}</span>
        <a class="qzcscl-title-view" href="{{section.settings.view_link}}">
          <span class="qzcscl-title-view-text">{{section.settings.view_text}}</span>
          <svg t="1725613970445" class="qzcscl-title-view-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21718" width="20" height="20"><path d="M679.5008 500.096v-23.80288h-23.808v-23.80288h-23.80288v-23.808h-23.80288v-23.80288h-23.808v-23.86944h-23.808v-23.80288h-23.86944v-23.80288h-23.80288v-23.808h-23.80288v-23.808h-23.808v-23.808h-23.80288v-23.80288h-23.808v-23.86944h-23.80288v-23.80288h-23.86944v-23.80288h-23.80288v-23.808h-23.808V119.0912h-23.808v-23.80288h-23.80288V71.4752H250.88V0h71.41376v23.80288h23.808v23.86944h23.80288v23.80288h23.86944v23.81312h23.80288v23.80288h23.808v23.80288h23.80288v23.808h23.808v23.80288h23.80288v23.80288h23.80288v23.86944h23.86944v23.80288h23.808v23.808h23.808v23.808h23.80288v23.808h23.80288v23.80288h23.808v23.80288h23.80288v23.86944h23.86944v23.80288h23.80288v23.808h23.80288v23.80288h23.808V547.77344h-23.808v23.80288h-23.80288v23.808h-23.80288v23.808h-23.86944v23.80288h-23.80288v23.80288h-23.808v23.80288h-23.80288v23.86944h-23.80288v23.808h-23.808v23.80288h-23.808v23.808h-23.86944v23.80288h-23.80288v23.808h-23.80288v23.80288h-23.808v23.80288h-23.80288v23.86944h-23.808v23.808h-23.80288v23.80288h-23.86944v23.808h-23.80288v23.80288h-23.808V1024H250.88v-71.41376h23.80288v-23.80288h23.80288v-23.808h23.808v-23.86944h23.808v-23.80288h23.80288v-23.80288h23.86944v-23.808h23.80288v-23.80288h23.808v-23.808h23.80288v-23.80288h23.808v-23.808h23.80288v-23.86944h23.80288v-23.80288h23.86944v-23.80288h23.808v-23.80288h23.808v-23.808h23.80288v-23.808h23.80288v-23.86432h23.808v-23.808h23.80288v-23.808z" p-id="21719"></path></svg>
        </a>
    </div>
    <div class="qzcscl-main">
        <div class="qzcscl-item">
            {% for block in section.blocks %}
            <div class="qzcscl-list">
                <a href="{{block.settings.link}}" class="qzcscl-list-url">
                    <img class="qzcscl-list-img" src="{{ block.settings.img | img_url: 'master' }}" />
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% schema %}
  {
    "name": "通用 - 集合列表",
    "class": "common-sections-collection-list",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "标题"
      },
      {
        "type": "text",
        "id": "view_text",
        "label": "更多",
        "default": "View all"
      },
      {
        "type": "url",
        "id": "view_link",
        "label": "更多链接"
      }
    ],
    "blocks": [
      {
        "type": "slide",
        "name": "单个元素",
        "settings": [
          {
            "type": "image_picker",
            "id": "img",
            "label": "图片"
          },
          {
            "type": "url",
            "id": "link",
            "label": "链接"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "通用 - 集合列表",
        "category": "通用"
      }
    ]
  }
{% endschema %}